<template>
    <div class="serviceMesSend">

        <el-card shadow="never" class="card-com">
            <div class="card-1">
                <searchPanel @refresh="getData('reset')">
                    <!-- 查询面板 -->
                    <template v-slot:search>
                        <el-form :inline="true" :model="listSearch" class="demo-form-inline" label-width="120px">
                            <el-row :gutter="20">

                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="接收人" style="width: 100%;">
                                        <NormalInput @getData="getData('search')"
                                            v-model:modelValue="listSearch.condition.recipient"></NormalInput>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="发送时间">
                                        <TimePicker v-model:operateTime="operateTime" style="width: 100%;"
                                            @timeChange="timeChange">
                                        </TimePicker>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="短信内容">
                                        <NormalInput @getData="getData('search')"
                                            v-model:modelValue="listSearch.condition.content"></NormalInput>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="短信状态">
                                        <BlackSelect @myChange="getData('search')"
                                            v-model:select-value="listSearch.condition.status" :options="sendStatus">
                                        </BlackSelect>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="响应记录" style="width: 100%;">
                                        <NormalInput @getData="getData('search')"
                                            v-model:modelValue="listSearch.condition.respMsg"></NormalInput>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row justify="end">
                                <el-button type="primary" @click="getData('search')">查询</el-button>
                                <el-button @click="getData('reset')">重置</el-button>
                            </el-row>
                        </el-form>
                    </template>
                    <!-- 字段添加 -->
                    <template v-slot:add v-if="pageParams.clientWidth >= 1200">
                        <el-form :inline="true" ref="messageRef" :model="sendMessage" :rules="rules"
                            class="demo-form-inline" label-width="80px">

                            <el-form-item label="接收人" style="width: 250px;" prop="mobile">
                                <NormalInput v-model="sendMessage.mobile"></NormalInput>
                            </el-form-item>

                            <el-form-item label="短信内容" style="width: 250px;" prop="templateCode">
                                <BlackSelect v-model:select-value="sendMessage.templateCode" :filterable="true"
                                    :options="listCollect.messageList">
                                </BlackSelect>
                            </el-form-item>

                            <el-form-item style="width: 100px;">
                                <el-button type="primary" @click="sendMessBtn">发送</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                    <template v-slot:edit>
                        <el-button :icon="Plus" type="primary" @click="AddEditBtn('add')" title="新增短信模板"></el-button>
                        <el-button :icon="List" type="primary" @click="lookTemList" title="新增短信模板列表"></el-button>
                        <DropItem v-model:tableProp="tableProp"></DropItem>

                    </template>
                </searchPanel>
            </div>
            <!-- 单独一个 1200px 出现-->
            <div class="sendCode" v-if="pageParams.clientWidth < 1200">
                <el-form :inline="true" ref="messageRef" :model="sendMessage" :rules="rules" class="demo-form-inline"
                    label-width="80px">
                    <el-row>
                        <el-col :xs="24" :sm="12" :sd="12" :lg="12" :xl="12">
                            <el-form-item label="接收人" style="width: 250px;" prop="mobile">
                                <NormalInput v-model="sendMessage.mobile"></NormalInput>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :sd="12" :lg="12" :xl="12">
                            <el-form-item label="短信内容" style="width: 250px;" prop="templateCode">
                                <BlackSelect v-model:select-value="sendMessage.templateCode" :filterable="true"
                                    :options="listCollect.messageList">
                                </BlackSelect>


                            </el-form-item>

                            <el-form-item style="width: 100px;">
                                <el-button type="primary" @click="sendMessBtn">发送</el-button>
                            </el-form-item>

                        </el-col>
                    </el-row>

                </el-form>
            </div>
            <div class="card-2">
                <!-- table数据 -->
                <OnlyTable ref="onlyTableRef" :tableProps="tableProp" :pageTotal="pageParams.total" @get-page="handPage"
                    :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight"
                    :loading="pageParams.loadIng">
                </OnlyTable>
            </div>
        </el-card>
        <addAndEdit @reflash="getData('reset')" ref="addEditRef"></addAndEdit>
        <templateList ref="temPlateRef"></templateList>
    </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { onMounted, ref, nextTick, onUnmounted, defineAsyncComponent } from 'vue';
import { Search, Plus, Refresh, Download, List } from '@element-plus/icons-vue'

import _ from "lodash"
import { serviceSystemListStore } from "./pageStore"
import { useEnumStore } from "@/store/enumeration"
import { useComListData } from "@/store/list"
const addAndEdit = defineAsyncComponent(() => import('./components/addEdit.vue'))
const templateList = defineAsyncComponent(() => import('./components/list.vue'))
const { sendStatus } = useEnumStore()
const { detailData, tableProp, listSearch, pageParams, addEditRef, detailRef, operateTime, sendMessage, rules, messageRef } = storeToRefs(serviceSystemListStore())
const { listCollect,
    getMessageList } = useComListData()
const { getData1, handPage, AddEditBtn, delBtn, detailBtn, timeChange, sendMessBtn } = serviceSystemListStore()
const temPlateRef = ref<{ show: (title: string, row?: any) => void }>()
const onlyTableRef = ref()
onMounted(() => {
    getData1('reset')
    nextTick(() => {
        // 获取宽度 
        const clientWidth = document.body.clientWidth;
        pageParams.value.clientWidth = clientWidth
    })
    window.addEventListener('resize', resizeWin)
    getMessageList()
})
const lookTemList = async () => {
    await getMessageList()
    temPlateRef.value?.show('edit')
}
onUnmounted(() => {
    window.removeEventListener('resize', resizeWin)
})
const resizeWin = _.debounce(() => {
    const clientWidth = document.body.clientWidth;
    pageParams.value.clientWidth = clientWidth
}, 200)
const getData = (type: string) => {
    if (type == 'reset') {
        onlyTableRef.value.initPagination()
        messageRef.value?.resetFields()
    }
    getData1(type)
    resizeWin()
}
</script>

<style scoped lang="scss">
.serviceMesSend {
    height: calc(100vh - 70px);

    .card-com {
        display: flex;
        flex-direction: column;

    }

    .card-2 {
        flex-grow: 1;
    }
}

.el-form--inline .el-form-item {
    margin-right: 12px;
}
</style>